<template>
	<view>
		<view v-if="!chat_checked" style="height: 124rpx;" @touchmove.stop.prevent="clear">
			<view style="position: fixed;bottom: -2rpx;left: 0;width: 100vw;transform: translateZ(0);z-index: 2;"
				:style="{bottom:bottom+'px'}">
				<!-- 回复 -->
				<view style="position: relative;width: 100vw;height: 0;" v-if="reply">
					<view class="chat-reply over-line1">
						{{reply}}
					</view>
					<view @tap.stop="del_replay" class="iconfont icon-guanbi- reply-del"></view>
				</view>
				<!-- 回复 -->
				<view @touchmove.stop.prevent="clear"
					style="padding:14rpx 0rpx;background-color: #FFFFFF;box-shadow: 0px 0px 4rpx 0px rgba(52,80,153,0.2);width: 100vw;box-sizing: border-box;transform: translateY(2rpx);">

					<view style="display: flex;align-items: center;flex-flow: row nowrap;padding:0rpx 20rpx;"
						class="flex-x-center">
						<view v-if="showVoice" @tap.stop="choose_input_type" style="height: 100%;"
							class="flex flex-x-y">
							<view class="iconfont  icon-jianpan input-icon" style="margin-left:0;font-size: 66rpx;">
							</view>
							<!-- <view v-else class="iconfont  icon-maikefeng input-icon" style="margin-left:0;font-size: 66rpx;">
							</view> -->
						</view>
						<view v-else style="width: 10rpx;"></view>
						<voice @send="send_voice" v-if="!input_type"></voice>
						<view v-else class="flex-1 input-box no-scroll">
							<textarea :confirm-hold="true" @confirm="input_confirm" :focus="focus" @focus="input_focus"
								@blur="input_blur" confirm-type="send" :hold-keyboard="true"
								@keyboardheightchange="keyboardheightchange" :adjust-position="false" class="textarea1"
								placeholder-style="color: #999999;" :autoHeight="true" v-model.sync="message"
								placeholder="" @linechange="linechange" :maxlength="500" />
						</view>
						<view class="flex flex-y-center" style="height: 80rpx;">
							<view v-if="showIcon" class="iconfont icon-smile input-icon" style=""
								@tap.stop="choose_bqb"></view>
							<view v-else style="width: 30rpx;"></view>
							<view v-if="!show_btn" @tap.stop="choose_more" class="iconfont icon-tianjia1 input-icon"
								style="padding: 0 10rpx 0 0rpx;"></view>
							<view v-else @touchend.prevent="input_confirm" class="send-btn-1">发送</view>
						</view>
					</view>
					<view style="height: 20rpx;"></view>

					<view v-if="more" style="height: 500rpx;border-top: 0.5px solid rgba(0,0,0,0.1);padding: 0 20rpx;"
						class="">
						<view class="flex flex-wrap flex-y-start">


							<view @tap.stop="choose_image(1)" class="more-item">
								<view class="flex flex-y flex-x-y more-box">
									<image src="../../static/chat/more/1.png" class="more-image"></image>
								</view>
								<view class="more-text">图片</view>
							</view>
							<!-- <view @tap.stop="choose_image(1,800,'camera')" class="more-item">
								<view class="flex flex-y flex-x-y more-box">
									<image src="../../static/chat/more/2.png" class="more-image"></image>
								</view>
								<view class="more-text">图片</view>
							</view> -->
							<!-- <view @tap.stop="audioHandel" class="more-item">
								<view class="flex flex-y flex-x-y more-box">
									<image src="../../static/fgx/m2.png" class="more-image"></image>
								</view>
								<view class="more-text">拍摄</view>
							</view> -->
							<view v-if="showCard" @tap.stop="choose_card" class="more-item">
								<view class="flex flex-y flex-x-y more-box">
									<image src="../../static/chat/more/3.png" class="more-image"></image>
								</view>
								<view class="more-text">名片</view>
							</view>
							<view v-if="showAddress" @tap.stop="selectAddress" class="more-item">
								<view class="flex flex-y flex-x-y more-box">
									<image src="../../static/chat/more/4.png" class="more-image"></image>
								</view>
								<view class="more-text">位置</view>
							</view>
							<view v-if="showLove" @tap.stop="toPage('/pages/user/collect')" class="more-item">
								<view class="flex flex-y flex-x-y more-box">
									<image src="../../static/chat/more/5.png" class="more-image"></image>
								</view>
								<view class="more-text">收藏</view>
							</view>
							<!-- <view v-if="showLive" @tap.stop="toPage('/pages/chat/solitaire?gid='+gid)" class="more-item">
								<view class="flex flex-y flex-x-y more-box">
									<image src="../../static/fgx/m6.png" class="more-image"></image>
								</view>
								<view class="more-text">直播</view>
							</view> -->
							<view v-if="showAudio" @tap.stop="audioHandel" class="more-item">
								<view class="flex flex-y flex-x-y more-box">
									<view class="iconfont icon-dianhua bg-box flex flex-x-y fs-30 blod"></view>
								</view>
								<view class="more-text color-blue">通话</view>
							</view>
						</view>
					</view>
					<!-- 表情 -->
					<view v-if="bqb" @touchmove.stop.prevent="clear"
						style="height: 500rpx;border-top: 0.5px solid rgba(0,0,0,0.1);align-items: flex-start;padding: 0 14rpx;">
						<scroll-view :scroll-x="true"
							style="height: 80rpx;padding: 0 20rpx;white-space: nowrap;width: 100%;">

							<view style="width: auto;">
								<view @tap.stop="choose_bqb_1(item,index)" v-for="(item,index) in bqb_title_list"
									:key="item.id"
									style="height: 80rpx;display: inline-block;margin-right: 30rpx;line-height: 80rpx;"
									class="color-black" :style="bqb_index == index ?'color:#F4944E;':''">
									<text>{{item}}</text>
								</view>
							</view>


						</scroll-view>
						<scroll-view :scroll-y="true" style="width: 100%;height: 434rpx;">
							<view style="height: 10rpx;"></view>
							<view class="flex flex-wrap flex-y-start" style="width: 100%;">
								<view class="more-item-1 flex flex-x-y" v-if="mine_bqb">

									<view @tap.stop="choose_image(2,160)" class="i-add flex flex-x-y">
										<view class="iconfont icon-zengjia" style="color: #ABABAB;font-size: 50rpx;">
										</view>
									</view>
								</view>
								<view @longpress="del_bqb(item)" @tap.stop="send_bqb(item.url)" class="more-item-1"
									v-for="(item,index) in bqb_list" :key="item.id">
									<image :lazy-load="true" :src="item.url" mode="aspectFill"></image>
								</view>
							</view>


						</scroll-view>
					</view>

					<!-- 表情 -->
				</view>

			</view>
		</view>
		<!-- <powers ref="powers"></powers> -->
		<powers1 ref="powers1" type="top" @changeAuth="changeAuth" :permissionID="permissionID"></powers1>
	</view>
</template>

<script>
	import powers1 from '@/components/powers/powers1.vue'
	let envinfo = require('../../siteinfo');
	import voice from './voice.vue';
	export default {
		name: "chat",

		components: {
			powers1,
			voice
		},
		data() {
			return {
				permissionID:'',
				permissionID1:'',
				permissionID2:'',
				message: '',
				bottom: 0,
				focus: false,
				bottom2: 0,
				more: false,
				bqb: false,
				bqb_title_list: [],
				bqb_list: [],
				bqb_all: [],
				mine_bqb: true,
				ios: false,

				bqb_index: 0,

				input_type: true,
				gid: '', //群id
				reply: '', //引用文本
			};
		},
		props: {
			id: {
				type: [String, Number],
				default: '',
			},
			//是否显示语音通话
			showAudio: {
				type: Boolean,
				default: true,
			},
			//是否显示语音消息
			showVoice: {
				type: Boolean,
				default: true,
			},
			//是否显示表情
			showIcon: {
				type: Boolean,
				default: true,
			},
			//是否显示接龙
			showJl: {
				type: Boolean,
				default: false,
			},
			//是否显示直播
			showLive: {
				type: [String, Number],
				default: '',
			},
			//是否显示名片
			showCard: {
				type: Boolean,
				default: false,
			},
			//是否显示地址
			showAddress: {
				type: Boolean,
				default: true,
			},
			//是否显示收藏
			showLove: {
				type: Boolean,
				default: true,
			},
		},
		watch: {
			bottom(value) {
				this.$emit('heightChange', value + this.bottom2 + ((this.more || this.bqb) ? uni.upx2px(500) : 0));
			},
			bottom2(value) {
				this.$emit('heightChange', value + this.bottom + ((this.more || this.bqb) ? uni.upx2px(500) : 0));
			}

		},
		computed: {
			show_btn() {
				return String(this.message).trim() && !this.ios;
			},
		},
		created() {
			let data = uni.getStorageSync('bqb') || [];
			if (data.length > 0) {
				this.bqb_all = data;
				if (!data[0].emoticonList) {
					data[0].emoticonList = [];
				}
				this.bqb_list = data[0].emoticonList || [];
				this.bqb_title_list = data.map(val => val.title);
			}

			if (uni.getSystemInfoSync().platform == 'ios') {
				this.ios = true;
			}

			// uni.$on('CHAT_SEND', this.send_all);
			// uni.$on('CHAT_REPLY', this.CHAT_REPLY);
			getApp().globalData.CHAT_SEND = (data) => {
				this.send_all(data);
			}
			getApp().globalData.CHAT_REPLY = (...data) => {
				this.CHAT_REPLY(...data);
			}
		},
		mounted() {

			if (!getApp().globalData.bqb) {

				this.get_bqb();
			}
			uni.$on('refresh_bqb', () => {
				this.get_bqb();
			});
		},
		beforeDestroy() {
			uni.$off('refresh_bqb');
			// uni.$off('CHAT_SEND');
			// uni.$off('CHAT_REPLY');
		},
		methods: {
			CHAT_REPLY(text, replyId) {
				// console.log('回复', text, replyId);
				this.replyId = replyId || '';
				this.input_type = true;
				this.bqb = false;
				this.more = false;
				this.reply = text;
				this.focus = true;
				this.message = '';


			},
			send_all(e) {
				this.$emit('send', {
					msg: e.content,
					type: e.type,
					other: e.other || {}
				});
			},
			choose_input_type() {
				this.permissionID = 'POWERS_AUDIO'

				setTimeout(() => {
					this.$refs['powers1'].open();
				}, 500)
			},
			//用户授权权限后的回调
			changeAuth() {
				////////////
				this.bqb = false;
				this.more = false;
				this.input_type = !this.input_type;
				this.bottom = Math.random();
				////////////
				//这里是权限通过后执行自己的代码逻辑
				console.log('权限已授权，可执行自己的代码逻辑了');
			},

			choose_input_type1() {
				this.$refs.powers.open({
					powersType: 'POWERS_AUDIO',
					success: () => {
						////////////
						this.bqb = false;
						this.more = false;
						this.input_type = !this.input_type;
						this.bottom = Math.random();
						////////////
					}
				});



			},
			choose_more() {
				this.more = !this.more;
				this.bqb = false;
				this.bottom = Math.random();
				this.input_type = true;
			},
			choose_bqb() {
				this.bqb = !this.bqb;
				this.more = false;
				this.bottom = Math.random();
				this.input_type = true;
			},
			close_bqb() {
				if (this.bqb || this.more) {
					this.bqb = false;
					this.more = false;
					this.bottom = Math.random();
					this.input_type = true;
				}

			},
			keyboardheightchange(e) {

				console.log('input', e);
				this.bottom = Math.random();
				// if(this.ios){
				// 	setTimeout(()=>{
				// 		this.bottom = Math.random();
				// 	},100);
				// }
				return;
				if (!this.ios) {
					this.bottom = e.detail.height || 0;
				} else {
					this.bottom = Math.random();
				}


			},
			input_focus() {
				this.more = false;
				this.bqb = false;
				this.focus = true;

				if (this.ios) {
					setTimeout(() => {
						this.bottom = Math.random();
					}, 300);
				}

				// #ifdef H5
				this.$emit('heightChange', 1 + this.bottom2 + this.bottom + ((this.more || this.bqb) ? uni.upx2px(400) :
					0));
				// #endif
			},
			input_blur() {
				this.focus = false;
			},
			input_click() {
				// this.bottom = Math.random();
			},
			input_confirm() {

				if (!this.message.trim()) {
					return;
				}
				let time_now = new Date().getTime();
				if (!this.time2 || (time_now - this.time2) > 600) {
					this.time2 = time_now;
					let message = this.message.trim();
					this.message = '';

					this.$nextTick(() => {
						this.focus = true;
						this.message = '';
					});
					let reply = this.reply;
					this.reply = '';
					this.$emit('send', {
						msg: message,
						type: reply ? 'TEXT_REPLY' : 'TEXT',
						other: {
							relationId: this.replyId,
							relationContent: reply,
						}
					});
				}

			},
			linechange() {
				// 行高发生改变
				this.$nextTick(() => {
					uni.createSelectorQuery().in(this).select('.input-box').boundingClientRect(data => {
						console.log('input-box', data);
						let height_default = uni.upx2px(80);
						let height_now = Math.round(data.height);
						if (height_now <= height_default) {
							this.bottom2 = 0;
						} else {
							this.bottom2 = height_now - height_default;
						}
					}).exec();
				});
			},
			choose_image(type = 1, size = 800, openType = "album") {

				this.$refs.powers.open({
					powersType: openType == 'album' ? 'POWERS_IMAGE' : 'POWERS_CAMERA',
					success: () => {
						////////////
						uni.chooseImage({
							// sourceType: openType == 'album' ? ['album'] : ['camera'],
							count: 1,
							success: res => {

								let {
									tempFilePaths = []
								} = res
								console.log('res', res);
								tempFilePaths.forEach(val => {

									// #ifdef APP-PLUS
									// uni.compressImage({
									// 	src: val,
									// 	width: size,
									// 	success: img => {
									// 		this.upload_image(img.tempFilePath, type);
									// 		console.log('img.tempFilePath', img.tempFilePath);
									// 	},
									// 	fail: err => {
									// 		console.log('err', err);
									// 	}
									// });
									// #endif

									// #ifdef H5
									// this.upload_image(val, type);
									// #endif


									this.upload_image(val, type);

								})


							}
						})
						////////////
					}
				});



			},
			upload_image(url, type = 1) {
				uni.showLoading({
					title: '上传图片中',
					mask: true,
				})
				let appUrl = '/upload/image';

				appUrl = envinfo.root + appUrl;


				uni.uploadFile({
					url: appUrl,
					filePath: url,
					data: {
						photo: 'file',
						name: 'file'
					},
					name: 'file',
					header: {
						token: uni.getStorageSync('ACCESS_TOKEN'),
					},
					success: img_data => {
						uni.hideLoading();
						let data = JSON.parse(img_data.data);
						if (img_data.statusCode == 200 && img_data.errMsg == 'uploadFile:ok') {


							if (data.status == 200 && data.data && data.data) {

								if (type == 1) {
									this.$emit('send', {
										msg: `${data.data}`,
										type: 'IMAGE'
									})
								}
								if (type == 2) {
									this.add_bqb(data.data);
								}

							} else {
								this.showToast(data.data);
							}

						}

					}
				})

			},

			//获取表情包
			get_bqb() {
				this.request({
					url: '/chat/emoticon/getEmoticon',
					chat: true,
				}).then(res => {
					if (res.status == 200) {
						getApp().globalData.bqb = true;
						if (res.data) {
							this.bqb_index = 0;
							this.bqb_all = res.data || [];
							this.bqb_list = res.data[0]?.emoticonList || [];
							this.bqb_title_list = res.data.map(val => val.title);
							uni.setStorage({
								key: 'bqb',
								data: res.data || []
							});
						}

					}
				});
			},
			choose_bqb_1(item, index) {
				this.bqb_index = index;
				if (item == '我的收藏') {
					this.mine_bqb = true;
				} else {
					this.mine_bqb = false;
				}
				this.bqb_list = this.bqb_all.filter(val => val.title == item)[0].emoticonList;
			},
			//发送表情包
			send_bqb(src) {
				clearTimeout(this.send_timer);
				this.send_timer = setTimeout(() => {
					this.$emit('send', {
						msg: `${src}`,
						type: 'EMOJI'
					});
				}, 300);
			},
			send_voice(obj) {
				this.$emit('send', {
					msg: obj.msg,
					type: 'VOICE'
				});

			},
			//添加表情包
			add_bqb(url) {
				this.request({
					url: '/chat/emoticon/save',
					method: 'POST',
					chat: true,
					data: {
						url,
					}
				}).then(res => {
					//重新获取
					this.get_bqb();
				});
			},
			del_bqb(item) {
				if (!this.mine_bqb) return;
				uni.showActionSheet({
					itemList: ['删除'],
					success: (res) => {
						if (res.tapIndex == 0) {
							this.request({
								url: '/chat/emoticon/delete',
								method: 'POST',
								chat: true,
								data: {
									id: item.id,
								},
								loading: true
							}).then(res => {
								//重新获取
								// this.get_bqb();
								//去除本地
								this.bqb_list = this.bqb_list.filter(val => val.id != item.id);
								this.bqb_all[0].emoticonList = this.bqb_all[0].emoticonList.filter(
									val => val.id != item.id);
								uni.setStorage({
									key: 'bqb',
									data: this.bqb_all
								});
							});
						}
					}
				})
			},
			//通话
			audioHandel() {
				this.less(() => {
					this.$emit('audioHandel');
				});
			},
			//发送名片
			choose_card() {
				getApp().globalData.found_list = this.clone(this.chat_friends.filter(val => val.id != this.id && val
					.id != this.user_info.id));
				this.toPage(`/pages/chat/found?gid=${this.gid}&title=发送名片&type=sendCard&sure_text=发送名片`);
			},
			selectAddress() {
				// console.log(11)
				this.$refs.powers.open({
					powersType: 'POWERS_ADDRESS',
					success: () => {
						////////////
						uni.chooseLocation({
							success: (res) => {
								// console.log(res, 'res')
								getApp().globalData.CHAT_SEND({
									type: 'ADDRESS',
									content: `[${res.latitude},${res.longitude}]${res.address}`,
								});

								// this.uniBack();
							},
							fail: () => {
								// console.log('fail')
							}
						})
						////////////
					}
				});


			},
			del_replay() {
				this.reply = '';
			},

		}
	}
</script>

<style lang="scss" scoped>
	.xxx {
		position: absolute;
		overflow-y: scroll;
		overflow-scrolling: touch;
	}

	.input-icon {
		font-size: 60rpx;
		color: #32343A;

		// background-color: red;
		height: 90rpx;
		line-height: 90rpx;
		padding: 0 20rpx;
	}

	.input-box {
		min-height: 80rpx;
		background: #F6F6F6;
		border-radius: 20rpx;
		padding: 0rpx 28rpx;
		width: 534rpx;
		max-height: 160rpx;
		overflow-y: scroll;


	}

	.textarea1 {
		padding: 0;
		font-size: 32rpx;
		line-height: 44rpx;
		flex: 1;
		width: 100%;
		text-align: justify;
		color: #32343A;
		padding-top: 18rpx;
		padding-bottom: 18rpx;
		word-break: break-word;

	}

	.more-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;


		.more-box {
			width: 120rpx;
			height: 120rpx;

			// background-color: rgba(255, 255, 255, 1);
			// border-radius: 20rpx;
			// border-radius: 8rpx;

			&>view {
				// color: red;
				font-size: 50rpx;
			}
		}

		.more-image {
			width: 120rpx;
			height: 120rpx;
		}

		.more-text {
			line-height: 44rpx;
			margin-top: 10rpx;
			color: #32343A;
		}
	}

	.more-item-1 {
		width: 20%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-bottom: 30rpx;


		& image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 20rpx;
			// background-color: #FFFFFF;
		}



	}

	.i-add {
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
		// border: 0.5px solid rgba(255, 255, 255, 0.4);
		background-color: #F6F6F6;
		box-shadow: 0 0 4rpx 0rpx rgba(255, 255, 255, 0.4) inset;
	}

	.send-btn-1 {
		width: 100rpx;
		height: 60rpx;
		background-color: $color;
		border-radius: 6rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		animation: send 0.4s;
		white-space: nowrap;
		overflow: hidden;
	}

	@keyframes send {
		0% {
			width: 60rpx;
		}

		100% {
			width: 100rpx;
		}
	}


	.chat-reply {
		width: 100vw;
		line-height: 80rpx;
		color: #999999;
		font-size: 26rpx;
		position: absolute;
		top: -76rpx;
		z-index: 4;
		border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
		background-color: #E7E9ED;
		height: 80rpx;
		padding-left: 20rpx;
		padding-right: 60rpx;
	}

	.reply-del {
		font-size: 30rpx;
		position: absolute;
		right: 0;
		top: -80rpx;
		line-height: 80rpx;
		padding-left: 28rpx;
		z-index: 6;
		width: 80rpx;
		height: 80rpx;
		color: #333;
	}

	.bg-box {
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
		background-color: #f8f7f7;
	}
</style>